<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px;margin-top:10px;"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="form_style"
    :size="formSize"
    status-icon
  >
  <h2>添加店铺
      <span>请在下面如实填写店铺信息，其中星号为必填项</span>
  </h2>
    <!-- <el-form-item label="创建订单用户id:"  prop="create_user_id" >
      <el-input v-model="ruleForm.create_user_id"  placeholder="创建订单用户账号"/>
    </el-form-item>
    <el-form-item label="商家id：" prop="shop_id">
      <el-input v-model="ruleForm.shop_id"  placeholder="该订单商家账号"/>
    </el-form-item> -->
    <!-- <el-form-item label="订单编号：" prop="orderSn">
      <el-input v-model="ruleForm.orderSn"  placeholder=""/>
    </el-form-item> -->
    <el-form-item label="用户帐号名：" prop="user_username">
      <el-input v-model="ruleForm.user_username"  placeholder="" />
    </el-form-item>
    <el-form-item label="提交时间：" prop="createTime">
      <el-input v-model="ruleForm.createTime"  placeholder="订单提交时间" />
    </el-form-item>
    <el-form-item label="预估总金额：" prop="totalAmount">
      <el-input v-model="ruleForm.totalAmount"  placeholder="" />
    </el-form-item>
    <el-form-item label="其他费用：" prop="otherAmount">
      <el-input v-model="ruleForm.otherAmount"  placeholder="" />
    </el-form-item>
    <el-form-item label="支付方式：" prop="payType">
      <el-input v-model="ruleForm.payType"  placeholder="" />
    </el-form-item>
    <el-form-item label="订单状态：" prop="status">
      <el-select v-model="ruleForm.Status" placeholder="请选择">
        <el-option label="待分配" value="shanghai" />
        <el-option label="待卸货" value="beijing" />
        <el-option label="待付款" value="shanghai" />
        <el-option label="已完成" value="beijing" />
        <el-option label="已关闭" value="shanghai" />
      </el-select>
    </el-form-item>
    <el-form-item label="配送车牌号：" prop="senderCar">
      <el-input v-model="ruleForm.sender_car"  placeholder="" />
    </el-form-item>
    <el-form-item label="驾驶员姓名：" prop="senderName">
      <el-input v-model="ruleForm.sender_name"  placeholder="" />
    </el-form-item>
    <el-form-item label="驾驶员电话：" prop="senderPhone">
      <el-input v-model="ruleForm.sender_phone"  placeholder="" />
    </el-form-item>
    <el-form-item label="卸货区号：" prop="areaNum">
      <el-input v-model="ruleForm.area_num"  placeholder="" />
    </el-form-item>
    <el-form-item label="卸货门牌号：" prop="stallNum">
      <el-input v-model="ruleForm.stall_num"  placeholder="" />
    </el-form-item>
    <el-form-item label="详细地址：" prop="Address">
      <el-input v-model="ruleForm.receiver_detail_address"  placeholder="" />
    </el-form-item>
    <el-form-item label="订单备注：" prop="note">
      <el-input v-model="ruleForm.note"  placeholder="备注信息"  type="textarea"/>  
    </el-form-item>
    <el-form-item label="支付状态" prop="confirm_status">
      <el-select v-model="ruleForm.confirm_status" placeholder="请选择">
        <el-option label="未确认" value="shanghai" />
        <el-option label="已确认" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="分配卸货小组时间" required>
      <el-col :span="11">
        <el-form-item prop="distributeTime">
          <el-date-picker
            v-model="ruleForm.date1"
            type="date"
            aria-label="Pick a date"
            placeholder="Pick a date"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="卸货时间：" prop="unloadTime">
      <el-input v-model="ruleForm.unloadTime"  placeholder=""  type="testarea"/>  
    </el-form-item>
    <el-form-item label="确认收货时间：" prop="receiveTime">
      <el-input v-model="ruleForm.receive_time"  placeholder=""  type="testarea"/>  
    </el-form-item>
    <el-form-item label="支付时间：" prop="paymentTime">
      <el-input v-model="ruleForm.paymentTime"  placeholder=""  type="testarea"/>  
    </el-form-item>
   <el-button type="primary" style="margin-left: 50%;">提交</el-button>
  </el-form>
 
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

const dialogTableVisible1 = ref(false)

interface RuleForm {
  orderSn: string
  createTime: string
  userUsername: string
  totalAmount: string
  otherAmount: string
  status: string
  senderCar: string
  senderName: string 
  senderPhone: string 
  areaNum: string
  stallNum: string
  address: string
  note: string
  confirm_status: string
  distributeTime: string
  unloadTime: string
  receive_time: string
  payment_time: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  create_user_id: '',
  shop_id: '',
  order_sn: '',
  create_time: '',
  user_username: '',
  total_amount: '',
  other_amount: '',
  status: '',
  sender_car: '',
  sender_name: '',
  sender_phone: '',
  area_num: '',
  stall_num: '',
  address: '',
  note: '',
  confirm_status: '',
  distribute_time: '',
  unload_time: '',
  receive_time: '',
  payment_time: '',
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({
  create_user_id: [
    { required: true, message: 'Please input Activity order_sn', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  shop_id: [
    {
      //true添加星号
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  order_sn: [
    {
      //required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
  create_time: [
    {
      type: 'date',
      //required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  user_username: [
    {
      type: 'date',
      //required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  total_amount: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  other_amount: [
    {
      type: 'date',
      //required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  status: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  sender_car: [
    {
      type: 'date',
      //required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  sender_name: [
    {
      type: 'date',
      //required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  sender_phone: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  area_num: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  stall_num: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  receive_time: [
    {
      type: 'date',
      //required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  address: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  note: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  confirm_status: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  distribute_time: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  unload_time: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  payment_time: [
    {
      type: 'date',
      //required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],

})
</script>
<style scoped>
/* 表单的样式 */
.form_style {
  margin-left:auto;
  margin-right:auto;
  max-width: 500px;
  background: #FFF;
  padding: 30px 30px 20px 30px;
  box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;
  -webkit-box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;
  font: 12px Arial, Helvetica, sans-serif;
  color: #666;
  border-radius: 10px;
  -webkit-border-radius: 10p
}
/*大标题样式*/
.form_style h2 {
  font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
  padding: 0px 0px 10px 40px;
  display: block;
  border-bottom: 1px solid #F5F5F5;
  margin: -10px -30px 10px -30px;
  color: #354552;
}
/*小标题样式*/
.form_style h2>span {
display: block;
font-size: 12px;
}
</style>